<template>
    <n-scrollbar x-scrollable style="max-height: 100vh">
        <CommonPage>
            <div>
                <n-form ref="form"
                        :model="searchCondition"
                        label-placement="left"
                        label-align="right"
                        label-width="80px"
                        :show-require-mark="false">
                    <div>
                        <div class="grid md:flex md:flex-wrap md:gap-x-1">
                            <n-form-item style="margin-left: 10px">
                                <label style="width: 90px;">待换算币种：</label>
                                <n-input style="width: 170px;" v-model:value="searchCondition.nameBefore" placeholder="请输入待换算币种" clearable/>
                            </n-form-item>
                          <n-form-item style="margin-left: 20px">
                            <label style="width: 90px;">换算后币种：</label>
                            <n-input style="width: 170px;" v-model:value="searchCondition.nameAfter"
                                     placeholder="请输入换算后币种" clearable/>
                          </n-form-item>
                          <n-form-item style="margin-left: 10px">
                            <n-button type="primary" @click="searchByCondition">筛选</n-button>
                          </n-form-item>
                          <n-form-item style="margin-left: 10px">
                            <n-button type="primary" @click="showForm = true">添加汇率</n-button>
                          </n-form-item>
                          <n-form-item style="margin-left: 10px">
                            <n-button type="error" @click="deleteSelectProduct">批量删除</n-button>
                          </n-form-item>

                        </div>
                    </div>
                </n-form>
            </div>
          <AddRateForm
              :option="option"
              @update-page="searchByCondition"
              :show="showForm"
              :onClose="handleClose"/>
          <EditRateForm
              :option="option"
              @update-page="searchByCondition"
              :show="showForm1"
              :onClose="handleClose"
              :attribute="currentAttribute"
          />
          <n-data-table
              remote
              :single-line="false"
              ref="table"
              :columns="columns"
              :data="currencyList"
              :loading="loading"
              :pagination="paginationReactive"
              :row-key="rowKey"
              :scroll-x="900"
              @update:checked-row-keys="handleCheck"
          />
        </CommonPage>
    </n-scrollbar>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import api from '@/api/admin';
import CurrencyActions from "@/views/admin/system/system-setting/components/currency-actions.vue";
import {useUserStore} from '@/store';
import {useRouter} from 'vue-router';
import {NButton} from 'naive-ui'
import AddRateForm from './components/exchange-rate-add.vue'
import EditRateForm from './components/exchange-rate-edit.vue'

const showForm = ref(false);
const showForm1 = ref(false);
const handleClose = () => {
  showForm.value = false;
  showForm1.value = false;
};
const userStore = useUserStore()
const router = useRouter()
const loading = ref(true)
const currencyList = ref([])
const range = ref(null)
const value = ref("全部")
const checkedRowKeysRef = ref([]);
const currentAttribute = ref(null); // 当前编辑的属性
const option = ref([
])
const searchCondition = ref({
    nameBefore: "",
    nameAfter: ""
});
const admins = ref([])
admins.value.push({
    label:'全部',
    value:-1,
})
const columns = [
{
  type: 'selection',
  fixed: 'left',
},
  {
    key: 'colId',
    title: '序号',
    width: 60,
  },
{
  key: 'id',
  title: '汇率编号',
  width: 80,
},
{
  key: 'nameBefore',
  title: '待换算币种',
  width: 80,
},
{
  key: 'shortNameBefore',
  title: '简称',
  width: 80,
},

{
  key: 'exchangeRate',
  title: '汇率',
  width: 100,
},
{
  key: 'nameAfter',
  title: '换算后币种',
  width: 100,
},
{
  key: 'shortNameAfter',
  title: '简称',
  width: 100,
},

{
  key: 'operation',
  title: '操作',
  width: 100,
  render(row) {
    return h(
        CurrencyActions,
        {
          onClickDelete: () => onDeleteCurrency(row),
          onClickEdit: () => onEditCurrency(row),
        }
    );
  }
},
]

const onEditCurrency = async (shop) => {
  currentAttribute.value = shop; // 设置当前编辑的属性
  showForm1.value = true; // 显示编辑窗口
}

let total = 0
const paginationReactive = reactive({
page: 1,
pageSize: 10,
showSizePicker: true,
pageSizes: [10, 20, 50],
itemCount:0,
prefix: () => {
  return '查询出 ' + total + '条记录';
},
onChange: (page) => {
  paginationReactive.page = page;
  queryByPage()
},
onUpdatePageSize: (pageSize) => {
  paginationReactive.pageSize = pageSize;
  paginationReactive.page = 1;
  queryByPage()
}
});
const handleCheck = (rowKeys) => {
checkedRowKeysRef.value = rowKeys;
}
const deleteSelectProduct = () => {
if(checkedRowKeysRef.value.length <= 0) {
  $message.error("当前并未选择货币！")
  return
}
$dialog.confirm({
  title: '警告',
  content: '您确定删除当前所选货币？',
  positiveText: '确定',
  negativeText: '取消',
  onPositiveClick: async () => {
    const ids = checkedRowKeysRef.value.join(",")
    loading.value = true
    try {
      const res = await api.deleteCurrencies({params:{ids}})
      if(res.code === 200) {
        $message.success("删除所选货币成功！")
        await searchByCondition()
      }
      else {
        $message.error(res.message)
      }
    } catch (err) {
      $message.error("删除所选货币失败！")
    }finally{
      loading.value = false
    }
  },
})
}
const searchByCondition = async () => {
loading.value = true
try {
  paginationReactive.page = 1;
  const res = await api.findPageCurrency({
    params: {
      ...searchCondition.value,
      pageNum: paginationReactive.page,
      pageSize: paginationReactive.pageSize,
    }
  })
  if(res.code === 200) {
    total = res.data.total
    paginationReactive.itemCount = total
    const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
    currencyList.value = res.data.records.map((item,i)=>{
      return {...item,
        colId: baseCount + i + 1,
      }
    })
  }
  else {
    $message.error(res.message)
  }
} catch (err) {
  $message.error("查询货币失败！")
}finally{
  loading.value = false
}
}
const exportListInfo = async () => {
    const res = await api.exportProductCategoryList({
      adminId: searchCondition.value.adminId
    })
    const contentDisposition = res.headers["content-disposition"]
    // console.log(res)
    let original_fileName = ""
    if(contentDisposition) {
      const uri = res.headers["content-disposition"].split("=")[1]
      original_fileName = window.decodeURI(uri)
    }
    const blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
    if(window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, original_fileName);
    } else {
      const fileName = original_fileName;
      const elink = document.createElement('a')
      document.body.appendChild(elink)
      elink.download = fileName;
      elink.style.display = "none"
      elink.href = window.URL.createObjectURL(blob)
      elink.click()
      window.URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    }
}
const onDeleteCurrency = async (currency) => {
  $dialog.confirm({
    title: '警告',
    content: '您确定删除当前货币？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const {id} = currency
      loading.value = true
      console.log(id)
      try {
        const res = await api.deleteCurrency({id})

        if (res.code === 200) {
          $message.success("删除货币成功！")
          await searchByCondition()
        } else {
          $message.error(res.message)
        }
      } catch (err) {
          $message.error("删除货币失败！")
        }finally{
          loading.value = false
        }
      }
    })
}
const onEditProductCategory = async (currency) => {
    const {id} = currency
    await router.push({name: 'AdminLogDetail', params: {currencyId: id}});
}
const queryByPage = async () => {
    loading.value = true
    try {
      const res = await api.findPageCurrency(
        {
          params:{
            pageNum:paginationReactive.page,
            pageSize:paginationReactive.pageSize,
          }
        })
      if(res.code === 200) {
        total = res.data.total
        paginationReactive.itemCount = total
        const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
        currencyList.value = res.data.records.map((item,i)=>{
          return {...item,
            colId: baseCount + i + 1,
          }
        })
        // 调用函数生成n-cascader的options
      }
      else {
        $message.error(res.message)
      }
    } catch (err) {
      $message.error("获取货币失败！")
    }finally{
      loading.value = false
    }
}
const rowKey = (rowData) => {
    return rowData.id
}
onMounted(()=>{
    queryByPage()
})
</script>
<style scoped>
    :deep(.n-data-table-th__title),
    :deep(.n-data-table-td) {
        text-align: center;

    }
    :deep(.n-select) {
        width: 120px !important;
    }

    :deep(.two-line-description) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 控制显示的行数 */
        overflow: hidden;
    }
</style>
